<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p ref="title">{{ msg }}</p>
        <button @click="doModify">修改msg</button>
        <hr>

        <!-- 
            Vue无法检测对象属性的添加/删除操作
         -->
        <p>{{ user.name }}</p>
        <button @click="doUpdate">修改属性的值</button>
        <br>

        <p>{{ user.age }}</p>
        <button @click="doAdd">添加属性</button>
        <button @click="doDelete">删除属性</button>
        <hr>

        <!-- 
            Vue无法检测到数组的以下变动：
                1.直接使用索引设置数组元素的值
                2.当你修改数组的长度时
         -->
        <p>{{ names }}</p>
        <button @click="doArray">操作数组</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'welcome',
            user:{
                id:1001,
                name:'tom'
            },
            names:['aaa','bbb','ccc']
        },
        methods:{
            doModify(){
                this.msg = '欢迎' // 修改数据，异步执行DOM更新

                // 此时DOM还没更新，Vue实现响应式并不是数据发生变化后DOM立即变化，需要时间 
                // console.log(this.$refs.title.textContent)
                this.$nextTick(function(){
                    // 等待DOM更新完成后才会执行
                    console.log(this.$refs.title.textContent)
                })
            },
            doUpdate(){
                this.user.name = 'alice'
            },
            doAdd(){
                // this.user.age = 29 // 通过普通方式为对象添加属性时无法实时监视，不具有响应式

                // 添加响应式属性
                // this.$set(this.user,'age',29)
                Vue.set(this.user,'age',23)
            },
            doDelete(){
                // delete this.user.age // 无法触发视图更新

                // this.$delete(this.user,'age')
                Vue.delete(this.user,'age')
            },
            doArray(){
                // this.names[0] = 'xxx' // 无法触发更新
                // this.names[this.names.length] = 'zzz'

                // Vue.set(this.names,0,'xxx')
                // Vue.set(this.names,this.names.length,'zzz')

                // 变异方法，Vue对这些方法做了改写
                // this.names.splice(0,1,'xxx')
                // this.names.push('zzz')

                // this.names.length = 2
                this.names.splice(2)
                
            }
        }
    })
</script>
</html>